<template>
	<view>
		<view class="p-20px pb-120px">
			<view class="bg-white p-20px rounded-20px">
				<view class="mb-20px">
					<text>我的组队</text>
					<uv-form>
						<uv-form-item label="按员工选择" borderBottom labelWidth="100" @click="showActions">
							<uv-input v-model="state.EmployeeType" disabled disabledColor="#ffffff" placeholder="请选择"
								border="none">
							</uv-input>
							<template v-slot:right>
								<uv-icon name="arrow-right"></uv-icon>
							</template>
						</uv-form-item>
					</uv-form>
					<uv-action-sheet ref="actionsRef" :actions="state.actions" @select="selectAction"></uv-action-sheet>
				</view>

				<uv-search placeholder="请输入团队人数" v-model="state.searchTeam" :showAction="false"></uv-search>

				<view class="mt-20px">
					<uv-search placeholder="请输入队长或队员手机号搜索" v-model="state.search" :showAction="false"></uv-search>
				</view>
			</view>



			<view v-if="state.cardList && state.cardList.length">
				<BigCountNum title='您当前组队总数' :count='10960'>
				</BigCountNum>

				<view class="p-20px mb-20px bg-white rounded-20px" v-for="item in state.cardList" :key="item">
					<view class="teamLeaderInfo mb-20px flex flex-x-between flex-y-center">
						<view class="flex text-24px">
							<uv-avatar :src="item.src"></uv-avatar>
							<view class="ml-20px">
								<view class="leading-40px">{{item.name}}</view>
								<view>{{item.phone}}</view>
							</view>
						</view>
						<view class="flex">
							<view class="mr-10px">
								<uv-tags :text="`ID:${item.id}`" type="warning" shape="circle" size="mini"></uv-tags>
							</view>
							<uv-tags :text="`队员数:${item.teamCount}人`" type="success" shape="circle"
								size="mini"></uv-tags>
						</view>
					</view>
					<view class="w-300px mt-20px">
						<uv-button type="primary" text="拨打电话" @click="callPhone(item.phone)"></uv-button>
					</view>

					<view class="mt-20px p-20px bg-f1f1f1 rounded-20px text-24px"
						v-for="(child,childIndex) in item.children" :key='childIndex'>
						<view class="employeeInfo flex flex-x-between flex-y-center">
							<view class="flex flex-y-center">
								<uv-avatar :src="child.src"></uv-avatar>
								<view class="mx-20px">
									<view class="flex flex-y-center">
										<view class="leading-40px">{{child.name}}</view>
										<view v-if="child.type==0" class="tempType ml-10px rounded-20px">团长</view>
										<view v-else class="tempType ml-10px rounded-20px">队员</view>
									</view>
									<view class="px-10px py-5px mt-5px flex bg-e1e1e1 rounded-10px"
										@click="callPhone(child.phone)">
										<uv-icon name="phone-fill"></uv-icon>
										{{child.phone}}
									</view>
								</view>

							</view>
							<view class="flex">
								<uv-tags text="调团" type="warning" size="mini" class="mr-10px"
									@click="openLeaveTeam(child)"></uv-tags>
							</view>
						</view>

						<view class="content mt-20px">
							<uv-cell title="归属员工" :value="child.content.employees"></uv-cell>
							<uv-cell title="推荐人" :value="child.content.presenter"></uv-cell>
							<uv-cell title="订单编号" :value="child.content.orderNo"></uv-cell>
							<uv-cell title="购买时间" :value="child.content.buyTime"></uv-cell>
							<uv-cell title="支付金额" :value="child.content.money"></uv-cell>
							<uv-cell title="订单状态" :value="child.content.orderStatus"></uv-cell>
							<uv-cell title="新生/老生" :value="child.content.stuType"></uv-cell>
							<uv-cell title="购买商品" :value="child.content.shop"></uv-cell>
							<uv-cell title="学员年龄" :value="child.content.stuAge"></uv-cell>
						</view>

						<view class="mt-20px flex flex-x-around text-center">
							<view class="">
								<view>已支付 <text class="color-pink">{{0}}</text> 人</view>
								<view class="mt-10px px-10px py-8px bg-dedede rounded-5px"
									@click="gotoRecommendedDataInfo(0)">查看推荐明细</view>
							</view>
							<view class="">
								<view>未支付 <text class="color-pink">{{0}}</text> 人</view>
								<view class="mt-10px px-10px py-8px bg-dedede rounded-5px"
									@click="gotoRecommendedDataInfo(1)">查看推荐明细</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<uv-empty v-else mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>

			<uv-modal ref="modal" title="调团" @confirm="confirm">
				<view class="slot-content">
					<view class="flex flex-y-center">
						<text class="mr-20px">团ID:</text> <uv-input placeholder="请输入内容" border="surround"
							v-model="value" @change="change"></uv-input>
					</view>
					<view class="mt-10px text-24px">
						1、原订单为团长身份，团队必须没有队员才能调团，否则不可以调团
					</view>

					<view class="mt-10px text-24px">
						2、目标团ID如果为0则升级为队长
					</view>
					<view class="mt-10px text-24px">
						3、调团只会变更订单所属团队关系，不会变更用户推荐关系
					</view>
				</view>
			</uv-modal>
		</view>
		<BackWorkSpace></BackWorkSpace>
	</view>
</template>

<script setup name="Commission">
	import {
		ref,
		reactive,
	} from 'vue';
	import BackWorkSpace from '@/components/BackWorkSpace.vue'
	import BigCountNum from '@/components/BigCountNum.vue'
	import ColorfulCard from '@/components/ColorfulCard.vue'

	const actionsRef = ref()
	const state = reactive({
		EmployeeType: "",
		actions: [{
				name: '刘老师',
				value: '0'
			},
			{
				name: '王老师',
				value: '1'
			},
			{
				name: '李老师',
				value: '2'
			},
		],
		search: '',
		cardList: [{
				id: 0,
				src: 'https://cdn.uviewui.com/uview/album/2.jpg',
				name: '肖诗雨',
				phone: '13562443223',
				id: '12234',
				teamCount: 0,
				children: [{
					src: 'https://gitee.com/cheerqjy/utools-picture/raw/master/1684309818708-2023-5-17_15:50:19.png',
					name: '小团团',
					phone: '13562443223',
					type: 0, //类型 团长 团员
					teamId: '111',
					content: {
						employees: '青鸟老师',
						presenter: '李启明',
						orderNo: 'N20240303425338742',
						buyTime: '2024-03-11 03',
						money: '112.00',
						orderStatus: '已支付',
						stuType: '新生',
						shop: '美术(4-12岁)',
						stuAge: '8',
					},
				}],
			},
			{
				id: 1,
				src: 'https://via.placeholder.com/200x200.png/2878ff',
				name: '王劲松',
				phone: '13562443223',
				id: '12234',
				teamCount: 2,
				children: [{
						src: 'https://gitee.com/cheerqjy/utools-picture/raw/master/1684309818708-2023-5-17_15:50:19.png',
						name: '小菜不吃香菜',
						phone: '13562443223',
						type: 0, //类型 团长 团员
						teamId: '123',
						content: {
							employees: '青鸟老师',
							presenter: '李启明',
							orderNo: 'N20240303425338742',
							buyTime: '2024-03-11 03',
							money: '112.00',
							orderStatus: '已支付',
							stuType: '新生',
							shop: '美术(4-12岁)',
							stuAge: '8',
						},
					},
					{
						src: 'https://cdn.uviewui.com/uview/album/3.jpg',
						name: '王萌萌',
						phone: '13562443223',
						type: 1, //类型 团长 团员
						teamId: '322',
						content: {
							employees: '青鸟老师',
							presenter: '李启明',
							orderNo: 'N20240303425338742',
							buyTime: '2024-03-11 03',
							money: '112.00',
							orderStatus: '已支付',
							stuType: '新生',
							shop: '美术(4-12岁)',
							stuAge: '8',
						},
					}
				],
			}
		]
	})

	const showActions = () => {
		actionsRef.value.open()
	}
	const selectAction = (e) => {
		state.EmployeeType = e.name;
		console.log('按员工选择 调用接口');
	}

	const callPhone = (phone) => {
		console.log(phone);
		uni.makePhoneCall({
			phoneNumber: phone //仅为示例
		});
	}

	const modal = ref()
	const openLeaveTeam = (data) => {
		console.log(data.teamId);
		modal.value.open();
	}

	const confirm = () => {

	}

	const gotoRecommendedDataInfo = (currentTab) => {
		uni.$uv.route({
			url: '/pages/RecommendedDataInfo/RecommendedDataInfo',
			params: {
				pageType: 0,
				currentTab
			}
		})
	}
</script>

<style lang="scss">
	page {
		background: rgb(61, 114, 255);
	}

	.slot-content {
		width: 100%;
	}

	:deep(.uv-cell__body) {
		padding: 10rpx 0 !important;
	}

	.tempType {
		padding: 5rpx 10rpx;
		border: 1px solid cadetblue;
	}
</style>